<template>
<form @submit="submitOrder">
    <view class="pd-bg-fff">
        <view class="title-tips">购物信息(请仔细填写手机号，以确保电子兑换码准确发到您的手机。)</view>
        <view class="input-wrap">
            <view class="input-title">手机号码</view>
            <input type="number" name="mobile" maxlength="11" placeholder="手机号码" :value="mobile"></input>
        </view>
        <view class="input-wrap">
            <view class="input-title">买家留言</view>
            <input type="text" name="user_note" placeholder="备注（建议填写和商家达成一致的说明）"></input>
        </view>
        <view class="careful-wrap">
            <view class="careful-tips">注意：虚拟服务类商品订单凭借电子兑换码验证消费</view>
            <view class="careful-tips">说明：您本次购买的商品不需要收货地址，请正确输入接收手机号码，确保及时获得“电子兑换码”。可使用您已经绑定的手机或重新输入其它手机号码。</view>
        </view>
        <view class="goods-wrap">
            <view class="goods-pic">
                <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + goods.goods_id + '&width=200&height=200'"></image>
            </view>
            <view class="goods-cont">
                <view class="goods-name ellipsis-2">{{goods.goods_name}}</view>
                <view class="goods-des">{{goods.spec_name}}</view>
                <view class="goods-count">
                    <view class="goods-price"><view class="smg">￥</view><view class="sbg">{{goods.price[0]}}.</view><view class="smg">{{goods.price[1]}}</view></view>
                    <view class="goods-num">数量： x{{goods.goods_num}}</view>
                </view>
            </view>
        </view>
    </view>
    <view class="pay-for">
        <button class="pay-btn" form-type="submit">提交订单</button>
        <view class="consumer">
            <view class="total">订单总额 : <text class="co-red">{{order_price}}</text></view>
        </view>
    </view>
</form>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      goods: null,
      order_price: null,
      mobile: ''
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    options.price = parseFloat(options.price.replace(',', '.')).toFixed(2).split('.');
    this.setData({
      goods: options
    });
    var m = 0,
        s1 = this.goods.price.join('.'),
        s2 = this.goods.goods_num.toString();
    var order_price = (parseFloat(s1) * parseFloat(s2)).toFixed(2);
    this.setData({
      order_price: order_price
    });
    app.globalData.getUserInfo(function (user) {
      that.setData({
        mobile: user.mobile
      });
    });
  },
  methods: {
    submitOrder: function (e) {
      var that = this;
      var mobile = e.detail.value.mobile;
      var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;

      if (!phoneReg.test(mobile)) {
        app.globalData.showTextWarining("手机号不合法");
        return;
      }

      request.post('/api/virtual/add_order/add_order', {
        data: {
          goods_id: this.goods.goods_id,
          item_id: this.goods.item_id,
          goods_num: this.goods.goods_num,
          mobile: e.detail.value.mobile,
          user_note: e.detail.value.user_note
        },
        success: function (res) {
          var params = {
            order_sn: res.data.result,
            order_amount: that.goods.price * that.goods.goods_num,
            order_type: 5
          };
          var url = '/pages/cart/cart4/cart4?' + util.Obj2Str(params);
          uni.redirectTo({
            url: url
          });
        }
      });
    }
  }
};
</script>
<style>
page{
    background-color: white;
}
.title-tips{
    padding-top: 40rpx;
    padding-bottom: 20rpx;
    font-size:24rpx;
    line-height: 42rpx;
    color: #777;
}
.input-wrap{
    height: 48rpx;
    width: 680rpx;
    border: 1px solid #f3f3f3;
    display: flex;
    line-height: 48rpx;
    font-size: 24rpx;
    color: #444;
    margin-bottom: 20rpx;
}
.input-title{
    width: 150rpx;
    border-right: 1px solid #f3f3f3;
    text-align: center;
}
.input-wrap>input{
    width:488rpx;
    padding: 0 20rpx;
    height: 48rpx;
}
.careful-wrap{
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 20rpx;
}
.careful-tips{
    font-size: 24rpx;
    line-height: 36rpx;
    color: #ff6633;
    margin-bottom: 10rpx;
}
.goods-wrap{
    height: 180rpx;
    display: flex;
    margin-bottom: 20rpx;
}
.goods-pic{
    width: 180rpx;
    height: 180rpx;
    margin-right: 20rpx;
}
.goods-cont{
    width: 480rpx;
    color: #444;
}
.goods-name{
    font-size: 28rpx;
    line-height: 1;
    margin-bottom: 20rpx;
}
.goods-des{
    font-size: 24rpx;
    line-height: 1;
    margin-bottom: 20rpx;
}
.goods-count{
    font-size: 30rpx;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    color: #ff6a00;
}
.pay-for{
    width: 100%;
    height: 100rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 28rpx;
    color: #666;
    background-color:#f0f2f5;
}
.pay-for .pay-btn{
    float: right;
    width: 200rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #ff6a00;
    color: #fff;
    border-radius:0;
}
.pay-for .consumer{
    float: right;
    margin-right: 20rpx;
    margin-top: 25rpx;
    line-height: 50rpx;
}

.smg{
  font-size: 20rpx;
  display: inline-block;
}
.sbg{
  display: inline-block;
}
</style>